import { useState } from "react";
import { View } from "@tarojs/components";
import CustomLayout from "@/components/CustomLayout";
import { Range } from "@nutui/nutui-react-taro";
import "./index.scss";

function Index() {
  const [showValue, setShowValue] = useState({ "1": 30, "2": 30 });

  const list = [
    {
      key: "1",
      title: "显示对话轮次",
    },
    { key: "2", title: "上下文参考轮次" },
  ];

  const onRangeChange = (key, value) => {
    let newValue = { ...showValue };
    newValue[`${key}`] = value;
    setShowValue(newValue);
  };

  return (
    <>
      <CustomLayout.Header title="对话设置" />
      <CustomLayout.Body className="setting_dialogue">
        <View className="setting_dialogue_content">
          {list?.map((item) => {
            return (
              <View className="setting_dialogue_content_item" key={item?.key}>
                <View className="setting_dialogue_content_item_title">
                  {item?.title || ""}
                </View>
                <View className="setting_dialogue_content_item_range">
                  <Range
                    button={
                      <View className="range_button">
                        {showValue[`${item?.key}`]}
                      </View>
                    }
                    maxDescription={null}
                    minDescription={null}
                    value={showValue[`${item?.key}`]}
                    onChange={(value) => onRangeChange(item?.key, value)}
                  />
                </View>
              </View>
            );
          })}
        </View>
      </CustomLayout.Body>
    </>
  );
}

export default Index;
